<!-- 蓝色简洁登录页面 -->
<template>
	<view>

		<view class="containar t-login" v-if="able">
			<!-- 页面装饰图片 -->
			<image class="img-a" src="https://cdn.zhoukaiwen.com/head-bg.png"></image>
			<image class="img-b" src="https://zhoukaiwen.com/img/loginImg/3.png"></image>
			<!-- 标题 -->
			<view class="t-b">{{ title }}</view>
			<view class="t-b2">欢迎使用，煋玥阁</view>

			<view style="display: flex;align-items: center;justify-content: center;">
				<image src="../../static/vd.png" style="width: 250rpx;height: 250rpx;"></image>
			</view>
			<view class="btn">

				<view class="btn-sub" @click="setTime()">一键登录</view>
			</view>

			<view class="t-b2">
				<checkbox-group>
					<label @click="xieyi=!xieyi">
						<checkbox :checked="xieyi" style="transform:scale(0.7);margin-top: 50rpx;" />
						<text style="font-size: 12.5px;">已经阅读并同意<text style="color: royalblue;"
								@click="turnto()">《服务条款》</text>和<text @click="turnto()"
								style="color: royalblue;">《隐私协议》</text></text>
					</label>
				</checkbox-group>

				<view style="text-align: center;margin-top: 60%;">
					<text @click="able=false">密码登录</text>
				</view>
			</view>
		</view>

		<view class="t-login" v-if="!able">
			<view class="back" style="display: flex;align-items: center;justify-content: center;z-index: 5;"
				@tap="able=true">
				<image src="../../static/59fb9a221c0db_610.png" style="width: 25rpx;height: 35rpx;"></image>
				<view style="margin-left: 17rpx;"> 返回</view>
			</view>

			<!-- 页面装饰图片 -->
			<image class="img-a" src="https://cdn.zhoukaiwen.com/head-bg.png"></image>
			<image class="img-b" src="https://zhoukaiwen.com/img/loginImg/3.png"></image>
			<!-- 标题 -->
			<view class="t-b">{{ title }}</view>
			<view class="t-b2">欢迎使用，煋玥阁</view>
			<form class="cl">
				<view class="t-a">
					<image src="https://zhoukaiwen.com/img/loginImg/sj.png"></image>
					<view class="line"></view>
					<input type="number" name="phone" placeholder="请输入手机号" maxlength="11" v-model="userInfo.phone" />
				</view>
				<view class="t-a">
					<image src="https://zhoukaiwen.com/img/loginImg/yz.png"></image>
					<view class="line"></view>
					<input type="number" name="code" maxlength="6" placeholder="请输入密码" v-model="userInfo.passWord" />
				</view>
				<button @tap="login()">登 录</button>

				<view class="ss" style="margin-left: 80%;margin-top: 20rpx;" @click="show=true">找回密码</view>
			</form>
			<!-- <view class="t-f"><text>————— 第三方账号登录 —————</text></view>
			<view class="t-e cl">
				<view class="t-g" @tap="wxLogin()">
					<image src="https://zhoukaiwen.com/img/loginImg/wx.png"></image>
				</view>
				<view class="t-g" @tap="zfbLogin()">
					<image src="https://zhoukaiwen.com/img/loginImg/qq.png"></image>
				</view>
			</view> -->

			<u-popup :show="show" @close="close" @open="open">
				<view class="wai">
					<view class="em" @click="turn(1)">邮箱验证</view>
					<view class="we" @click="turn(2)">问题验证</view>
					<view class="ko"></view>
					<view class="qu" @click="show=false">取消</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				title: '欢迎回来！', //填写logo或者app名称，也可以用：欢迎回来，看您需求
				userInfo: {
					phone: '', //手机号码
					passWord: '', // 码
				},
				show: false, //找回密码
				xieyi: false, //协议
				able: true ,//登录切换
				time:0
			};
		},
		onShareAppMessage(res) { //发送给朋友
			return {
				title: this.title,
				imageUrl: this.thumb,
			}
		},
		onShareTimeline(res) { //分享到朋友圈
			return {
				title: this.title,
				imageUrl: this.thumb,
			}
		},
		onLoad() {
			let userToken = uni.getStorageSync('token')
			let user = uni.getStorageSync('user')
			let settings = uni.getStorageSync('settings')
			if (userToken && user && settings) {
				uni.switchTab({
					url: '/pages/index/index'
				})
				return false;
			}
			// this.loginToindex()
		},
		methods: {
			turnto() {
				uni.navigateTo({
					url: '/pagesa/fuWu/fuWu'
				})
			},
			loginToindex() {
				let userToken = uni.getStorageSync('token')
				if (userToken) {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}
			},
			turn(index) {
				uni.navigateTo({
					url: '/pagesa/passBack/passBack?id=' + index
				})
			},
			open() {},
			close() {
				this.show = false
				// console.log('close');
			},
			setTime() {
				var that=this;
				if (that.time == 0) {
					that.time  = 6; 
					var index = setInterval(function() {
						that.time --;
						if (that.time  === 0) {							
							clearInterval(index);
						}
					}, 1000);
					this.onSubmit()
					console.log('按钮事件被触发');
				} else {
				 console.log('目前按钮事件不允许被触发');
				 uni.showToast({
				 	title:that.time+'后在触发',
					icon:"none"
				 })
				}

			},
			async onSubmit() {
				var that = this;
				if (this.xieyi == false) {
					return uni.showToast({
						title: "请先阅读并同意协议！",
						icon: 'none'
					})
				}
				uni.login({
					provider: 'weixin',
					success(res) {
						const a = {
							code: res.code
						}
						uni.request({
							url: that.$baseurl + "/wexinLogin/login",
							method: "post",
							data: a,
							success: (res2) => {
								uni.showLoading({
									title: '加载中'
								});
								that.loginCommon(res2)
							}
						})
					}
				})
			},
			loginCommon(res) {
				uni.hideLoading();
				if (res.data.code !== 200) {
					console.log(123321)
					return uni.showToast({
						title: '账户被禁止,联系管理员',
						icon: 'none'
					})
				} else {
					uni.setStorageSync("user", res.data.data.user)
					uni.setStorageSync("token", res.data.data.token)
					uni.setStorageSync("settings", res.data.data.settings)
					uni.reLaunch({
						url: '/pages/index/index'
					})
					uni.showToast({
						title: '登录成功！',
						icon: 'none'
					});
				}
			},
			//当前登录按钮操作
			async login() {
				var that = this;
				if (!that.userInfo.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}
				if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(that.userInfo.phone)) {
					uni.showToast({
						title: '请输入正确手机号',
						icon: 'none'
					});
					return;
				}
				if (!that.userInfo.passWord) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return;
				}
				uni.request({
					url: that.$baseurl + "/wexinLogin/passwordLogin",
					method: "post",
					data: that.userInfo,
					success: (res2) => {
						uni.showLoading({
							title: '加载中'
						});
						if (res2.data.code === 500) {
							return uni.showToast({
								title: res2.data.msg,
								icon: "none"
							})
						}
						console.log(res2)
						that.loginCommon(res2)
						uni.hideLoading();
					}
				})
			},
			//等三方微信登录
			wxLogin() {
				uni.showToast({
					title: '微信登录',
					icon: 'none'
				});
			},
			//第三方支付宝登录
			zfbLogin() {
				uni.showToast({
					title: '支付宝登录',
					icon: 'none'
				});
			},
		}
	};
</script>
<style lang="scss" scoped>
	.wai {
		text-align: center;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

		color: #232323;

		.em {
			height: 90rpx;
			line-height: 90rpx;

		}

		;

		.we {
			height: 90rpx;
			line-height: 90rpx;
			border-top: 0.1px solid #999;
		}

		;

		.ko {
			height: 20rpx;
			background-color: #bdbdbd
		}

		;

		.qu {
			height: 90rpx;
			line-height: 90rpx;
		}

		;
	}

	.back {
		font-size: 15px;
		position: absolute;
		top: 100rpx;
		left: 25rpx;

		color: #110f0d;
		border: none;
	}

	.containar {

		.avatarUrl {
			padding: 80rpx 0 40rpx;
			background: #fff;

			button {
				background: #fff;
				line-height: 80rpx;
				height: auto;
				border: none !important;
				width: auto;
				// padding: 20rpx 30rpx;
				margin: 0;
				display: flex;
				border: none;
				justify-content: center;
				align-items: center;

				&::after {
					border: none;
				}

				.refreshIcon {
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;
					background-color: #ccc;
				}

				.jt {
					width: 14rpx;
					height: 28rpx;
				}
			}
		}

		.userName {
			background: #fff;
			padding: 20rpx 30rpx 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.weui-input {
				padding-left: 60rpx;
			}
		}

		.btn {
			width: 100%;

			.btn-sub {
				font-size: 28rpx;
				background: #55aa00;
				color: #fff;
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 50rpx;
				box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);

				width: 620rpx;
				margin: 80rpx auto 0;
				;

				line-height: 90rpx;
				text-align: center;
				font-size: 36rpx;
				color: #fff;
			}
		}
	}

	.ss {
		font-size: 27rpx;
		color: #9e9e9e;
		// padding-top: 10rpx;
		// display: inline;

	}

	.img-a {
		z-index: -1;
		position: absolute;
		width: 100%;
		height: 480rpx;
		top: -90rpx;
		right: 0;
	}

	.img-b {
		z-index: -1;
		position: absolute;
		width: 50%;
		bottom: 0;
		left: -50rpx;
		/* margin-bottom: -200rpx; */
	}

	.t-login {
		width: 620rpx;
		margin: 0 auto;
		font-size: 28rpx;
		color: #000;
	}

	.t-login button {
		font-size: 28rpx;
		background: #5677fc;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
		box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
	}

	.t-login input {
		padding: 0 20rpx 0 120rpx;
		height: 90rpx;
		line-height: 90rpx;
		margin-bottom: 50rpx;
		background: #f8f7fc;
		border: 1px solid #e9e9e9;
		font-size: 28rpx;
		border-radius: 50rpx;
	}

	.t-login .t-a {
		position: relative;
	}

	.t-login .t-a image {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: 40rpx;
		top: 28rpx;
		/* border-right: 2rpx solid #dedede; */
		margin-right: 20rpx;
	}

	.t-login .t-a .line {
		width: 2rpx;
		height: 40rpx;
		background-color: #dedede;
		position: absolute;
		top: 28rpx;
		left: 98rpx;
	}

	.t-login .t-b {
		z-index: 9999;
		text-align: left;
		font-size: 46rpx;
		color: #000;
		padding: 280rpx 0 30rpx 0;
		font-weight: bold;
	}

	.t-login .t-b2 {
		text-align: left;
		font-size: 32rpx;
		color: #aaaaaa;
		padding: 0rpx 0 110rpx 0;
	}

	.t-login .t-c {
		position: absolute;
		right: 22rpx;
		top: 22rpx;
		background: #5677fc;
		color: #fff;
		font-size: 24rpx;
		border-radius: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 25rpx;
	}

	.t-login .t-d {
		text-align: center;
		color: #999;
		margin: 80rpx 0;
	}

	.t-login .t-e {
		text-align: center;
		width: 250rpx;
		margin: 80rpx auto 0;
	}

	.t-login .t-g {
		float: left;
		width: 50%;
	}

	.t-login .t-e image {
		width: 50rpx;
		height: 50rpx;
	}

	.t-login .t-f {
		text-align: center;
		margin: 120rpx 0 0 0;
		color: #666;
	}

	.t-login .t-f text {
		margin-left: 20rpx;
		color: #aaaaaa;
		font-size: 27rpx;
	}

	.t-login .uni-input-placeholder {
		color: #000;
	}

	.cl {
		zoom: 1;
	}

	.cl:after {
		clear: both;
		display: block;
		visibility: hidden;
		height: 0;
		content: '\20';
	}
</style>
